import { Descriptions, Tag, Button, Table, Spin, Image } from 'antd';

import { useEffect, useState } from 'react';

import { GetSingleGoods, GetInventorys, GetGoodsOrderDetails } from '../../api/goods'
import { useLocation } from 'react-router-dom';
import React from "react";

const Detail = () => {
    const [detail, setDetail] = useState([]);
    const [order, setOrder] = useState([]);
    const [goods, setGoods] = useState([]);
    const [spinning, setSpinning] = React.useState(false);//加载中
    const location = useLocation();
    const detailData = async () => {
        setSpinning(true);
        await GetSingleGoods({
            id: location.pathname.slice(14),
        }).then((res) => {
            if (res.result === 0) {
                setDetail(res.data);
                setSpinning(false);
            }
        });

    };
    const goodsdata = async () => {
        await GetInventorys({
            id: location.pathname.slice(14),
        }).then((res) => {
            if (res.result === 0) {
                setGoods(res.data.data);
            }
        })
    };
    useEffect(() => {
        const order = async () => {
            await GetGoodsOrderDetails({
                id: location.pathname.slice(14)
            }).then((res) => {
                if (res.result === 0) {
                    setOrder(res.data.data);
                }
            })
        }
        detailData();
        order();
        goodsdata();
    }, []);
    const items = [
        {
            label: '名称',
            children: detail.name
        },
        {

            label: '类型',
            children: detail.type
        },
        {

            label: '供应商',
            children: <Tag color={detail.supplier !== null ? 'blue' : 'warning'}>{detail.supplier !== null ? detail.supplier : "直营"}</Tag>,
        },
        {

            label: '生厂日期',
            children: detail.birthday
        },
        {

            label: '保质期(天)',
            children: detail.expiryday,

        },
        {

            label: '规格',
            children: detail.specs

        },
        {

            label: '价格',
            children: <Tag color='red'>{detail.price}</Tag>,
        },
        {

            label: '上架',
            children: <Tag color={detail.isShelve === 1 ? 'green' : 'red'}>{detail.isShelve == 1 ? "是" : "否"}</Tag>,
        },
        {

            label: '封面',
            children: <Image src={detail.photo} alt="封面" style={{ width: '50px', height: '60px' }} />,
        },
        {

            label: '销量',
            children: <Tag color='blue'>{detail.sales}</Tag>,
        },
        {

            label: '库存',
            children: <Tag color='blue'>{detail.inventory}</Tag>,
        },
        {

            label: '禁用',
            children: <Tag color={detail.isBan === 1 ? 'red' : 'success'}>{detail.isBan === 1 ? "是" : "否"}</Tag>,
        },


        {

            label: '添加时间',
            children: (
                <Tag color='blue'>{detail.time}</Tag>
            )
        },
        {

            label: '描述',
            children: (
                detail.explain
            )
        },
    ]

    const orders = [
        {
            title: "序号",
            render: (index) => `${index + 1}`
        },
        {
            title: '详情号',
            dataIndex: 'id',

        },
        {
            title: '供应商',
            dataIndex: 'supplier',
            key: 'supplier',

        },
        {
            title: '商户',
            dataIndex: 'merchant',
        },
        {
            title: '商品',
            dataIndex: 'name',
        },
        {
            title: '数量',
            dataIndex: 'number',


        },
        {
            title: '单价',
            dataIndex: 'price',
        },
        {
            title: '总价',
            dataIndex: 'money',
        },
        {
            title: '时间',
            dataIndex: 'time',
        },
        {
            title: '发货',
            dataIndex: 'isSend',
        },
        {
            title: '收获',
            dataIndex: 'isReceive',

        },
        {
            title: '收获数量',
            dataIndex: 'receiveNumber',

        },
        {
            title: '收获金额',
            dataIndex: 'receiveMoney',

        },
        {
            title: '完成',
            dataIndex: 'isComplete',

        },
        {
            title: '操作',
            dataIndex: 'address',
            width: '250px',
            fixed: "right",
            render: () => (
                <span>
                    <Button type="primary" ghost>详情</Button>
                </span>
            )
        },
    ];
    const Goods = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: '行为',
            dataIndex: 'photo',
            render: (_, record) => (
                <Tag color={record.number > 0 ? 'blue' : 'danger'}> {record.number > 0 ? "补货" : "清货"}</Tag>
            )
        },
        {
            title: '数量',
            dataIndex: 'number',
            render: (_, record) => {
                return <Tag color='blue'>{record.number}</Tag>
            }

        },
        {
            title: '供应商',
            dataIndex: 'supplier',
            key: 'supplier',

        },
        {
            title: '时间',
            dataIndex: 'time',

        },

    ];
    return (
        <div className="container">
            <div className="content">
                <div>
                    <Descriptions title="商品详情" bordered items={items} layout='vertical' className="bold-label" labelBg='rgba(0,0,0,0.88)' />
                </div>
                <div style={{ marginTop: 20 }}>
                    <span className="Sales1">销售数据</span>
                    <div className="table" style={{ marginTop: 10 }}>
                        <Table
                            columns={orders}
                            dataSource={order}
                            bordered
                        />
                    </div>
                </div>
                <div style={{ marginTop: 20 }}>
                    <span className="Sales2">库存数据</span>
                    <div className="table" style={{ marginTop: 10 }}>
                        <Table
                            columns={Goods}
                            dataSource={goods}
                            bordered
                            pagination={false}
                        />
                    </div>
                </div>
            </div>
            <Spin spinning={spinning} tip="Loading" fullscreen />
        </div>
    )
}
export default Detail;